<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="1的N次幂">
    <meta name="Keywords" content="">
    <meta name="Description" content="这是一个3Dbanner效果的轮播图，只支持chrome等浏览器，每个浏览器效果都不太一样">
    <title>3D banner分块轮播</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 14px;
            overflow: hidden;
        }

        a {
            text-decoration: none;
            font-size: 14px;
            color: #fff;
        }

        ul li, ol {
            list-style-type: none;
        }

        .bg_img {
            width: 100%;
            height: 100%;
        }

        .bg_img img {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .container {
            margin-top: 150px;
            width: 100%;
            height: 100%;
        }

        .container .banner {
            margin: auto;
            width: 800px;
            height: 300px;
            perspective: 800px; /*设置透明深度（类似于看电影选位置，选个好位置才能看得更清楚）*/

        }

        .container .banner ul {
            width: 800px;
            height: 300px;
        }

        .container .banner ul li {
            width: 200px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d; /*设置3d环境，必须设置之后才有3d效果*/
            float: left;
            transition: all 2s ease;
        }

        .container .banner ul li div {
            width: 200px;
            height: 300px;
            position: absolute;
            text-align: center;
            line-height: 300px;
        }

        /*Start 设置背景图片、旋转角度和旋转轴*/
        /*
        li div:nth-child(n)：表示li下面可能有很多个div，但是我只选中了第n个div，n表示索引（该索引从1开始）
        transform:translateZ(150px);表示沿着Z轴正方向移动150px
        transform: rotateX(90deg);表示远着X轴旋转正的90度
        */
        .container .banner ul li div:nth-child(1) {
            top: -300px;
            transform: translateZ(150px) rotateX(90deg);
            transform-origin: bottom;
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/3.jpg");
        }

        .container .banner ul li div:nth-child(2) {
            top: 300px;
            transform: translateZ(150px) rotateX(-90deg);
            transform-origin: top;
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/1.jpg");
        }

        .container .banner ul li div:nth-child(3) {
            transform: translateZ(150px);
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/2.jpg");
        }

        .container .banner ul li div:nth-child(4) {
            transform: translateZ(-150px) rotateX(180deg);
            background-image: url("http://demo.zhangbin.xin/3d_banner_fklb/images/4.jpg");
        }

        /*Start 设置背景图片、旋转角度和旋转轴*/

        /*左右两边的看不到，所以这部分代码不需要（仅仅做测试使用）*/
        /* .container .banner ul li div:nth-child(5){
            right:200px;
            width:300px;
            transform:translateZ(150px) rotateY(-90deg);
            transform-origin:right;

        }
        .container .banner ul li div:nth-child(6){
            left:200px;
            width:300px;
            transform:translateZ(150px) rotateY(90deg);
            transform-origin:left;
        }
      */

        /* Start 背景定位*/
        /*
            ul li:nth-child(n) div:表示ul下面可能有很多个li，但是我只选中第n个li下面的所有div
        */
        .container .banner ul li:nth-child(1) div {
            background-position: 0;
        }

        .container .banner ul li:nth-child(2) div {
            background-position: -200px;
        }

        .container .banner ul li:nth-child(3) div {
            background-position: -400px;
        }

        .container .banner ul li:nth-child(4) div {
            background-position: -600px;
        }

        /* End 背景定位*/
        /*Start 添加hover事件，让banner动起来*/
        /*
        transition;表示一个时间过度或者是持续时间，它是一个过程。
        transition:all 2s linear;表示全部的效果都用两秒钟去完成（过度），效果是linear，还有其他效果，可以参考手册，其他的我也没用过(>﹏<。)～呜呜呜……
        */
        .banner:hover ul li {
            transform: rotateX(270deg);
            transition: all 2s linear;
        }

        /*End 添加hover事件，让banner动起来*/
    </style>
</head>

<body>
<div class="bg_img">
    <img src="images/bgs.jpg"/>
</div>
<div class="container">
    <div class="banner">
        <ul>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li style="z-index:-1;">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
